<template>
	<view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="{
        use: false,toTop: {bottom: '300rpx',},}">
			<!-- :style="[headerStyle]" -->
			<view class="index index-bg">
				<view class="indexTop">
					<u-navbar :is-fixed="false" :border-bottom="false" :background="{ background: 'transparent' }"
						:is-back="false">
						<view class="flex-1 flex row " style="position: relative">
							<!-- 定位信息展示 -->
							<view class="address-title" @click="RestartLocation">
								<!-- <u-icon name="map-fill" size="27" color="#FFFFFF"></u-icon> -->
								<image class="map-icon" src="@/static/images/home_address.png" mode=""></image>
								<text class="white sm map-text">{{cityInfo.userAddress}}</text>
							</view>
							<!-- #ifdef MP -->
							<view class="capsule-tips flex row-between" v-if="offPrompt">
								<text class="m-r-10">添加到”我的小程序”，红包、优惠不错过</text>
								<u-icon name="close" color="#FFFFFF" @click="clearIntervalFunc"></u-icon>
							</view>
							<!-- #endif -->
						</view>
					</u-navbar>
					<!-- 搜索条 -->
					<view class="flex">
						<view class="flex-1">
							<router-link to="/bundle/pages/goods_search/goods_search">
								<u-search wrap-bg-color="transparent" bg-color="#fff" :disabled="true" :height="62">
								</u-search>
							</router-link>
						</view>
					</view>
					<view class="flex">
						<view class="flex-1" style="min-width: 600rpx">
							<u-tabs active-color="#fff" inactive-color="#fff" :current="active" :list="cateList"
								bg-color="transparent" :active-item-style="{ fontSize: '32rpx' }" :bar-width="64"
								:bold="false" :barStyle="{background:'#FFFFFF',}" @change="changeActive">
							</u-tabs>
						</view>
						<!-- 阴影 -->
						<view class="cate-icon"></view>
						<!-- 分类 -->
						<router-link to="/pages/goods_cate/goods_cate" navType="pushTab">
							<view class="white flex cate-btn m-l-10">
								<image class="icon-xs m-r-4" src="/static/images/icon_cate.png" alt="" />
								分类
							</view>
						</router-link>
					</view>
				</view>
				<view class="tab-con">
					<view v-show="active == 0">
						<index-home ref="indexHome" :home-data="homeData" :nav-list="navList" :live-list="liveLists">
						</index-home>
						<goods-column :isoffmsg="isshowmsg" ref="mescrollItem" :autoGetData="false"></goods-column>
						<view v-if="!ischosed" class="add-button" @click="RestartLocation">
							查看附近更多商品~
						</view>
					</view>
					<template v-for="(item, index) in cateList">
						<view v-if="index > 0" class="tab-item" v-show="active == index" :key="index">
							<view>
								<cate-home v-if="showCateList[index]" :top="cateTop" ref="cateItem" :i="index"
									:index="active" :cate="item">
								</cate-home>
							</view>
						</view>
					</template>
				</view>
			</view>
			<!-- #ifdef APP-PLUS -->
			<lyg-popup v-if="appConfig.app_agreement" title="用户使用及隐私保护政策提示"
				protocolPath="/bundle/pages/server_explan/server_explan?type=0"
				policyPath="/bundle/pages/server_explan/server_explan?type=1" policyStorageKey="has_read_privacy">
			</lyg-popup>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<!-- 用户隐私协议弹框 -->
			<privacy-popup v-model="showPrivacyPopup"></privacy-popup>
			<!-- #endif -->
		</mescroll-body>

		<tabbar></tabbar>

		<!-- 无网络提示 -->
		<u-no-network z-index="1200" @retry="handleRetry"></u-no-network>
	</view>
</template>

<script>
	import MescrollCompMixin from "@/components/mescroll-uni/mixins/mescroll-comp";
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	import amap from '@/utils/amap-wx.130.js'
	import {
		mapGetters,
		mapMutations,
		mapActions
	} from "vuex";
	import {
		getMenu,
		getHome,
		getHotGoods,
		getLevelOneList
	} from "@/api/store";
	import {
		getConfig
	} from "@/api/app";
	import {
		getLiveLists
	} from "@/api/live";
	import {
		getRect,
		debounce
	} from "@/utils/tools";
	const app = getApp();
	const homeItem = {
		name: "首页",
	};
	let that = null
	export default {
		mixins: [MescrollMixin, MescrollCompMixin],
		data() {
			return {
				offPrompt: true,
				active: 0,
				navBg: 0,
				goodsList: [],
				homeData: {},
				navList: [],
				enable: true,
				cateList: [homeItem],
				showCateList: [],
				liveLists: [],
				showPrivacyPopup: false, //微信用户隐私协议
				isshowmsg: false,
				// topHeight: ''
			};
		},
		async onLoad(options) {
			//定位
			// this.initLocationFunc();
			// #ifdef MP-WEIXIN
			wx.getPrivacySetting({
				success: (res) => {
					//// console.log(res,
					// 	"------"
					//); // 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
					if (res.needAuthorization) {
						// 需要弹出隐私协议
						this.showPrivacyPopup = true;
					}
				},
				fail: (err) => {
					console.log(err);
				},
			});
			// #endif

			// 选择城市后是否刷新
			if (options?.refresh) await this.getHomeFun();
			// 监听是否刷新页面，目前秒杀时会用到
			uni.$on("refreshhome", () => {
				this.getHomeFun();
			});
			// 地址更新监听事件
			uni.$on('refreshPage', (data) => {
				this.goodsList = []
				this.homeData = {}
				this.navList = []
				this.cateList = [homeItem]
				// this.showCateList=[]
				this.liveLists = []
				this.getLevelOneListFun();
				this.getMenuFun();
				this.getHomeFun();
				// #ifdef MP-WEIXIN
				this.getLiveListsFun();
				// #endif
				this.$refs.mescrollItem.getData();
				this.mescroll.endSuccess(0, false);
			});
			// #ifdef MP-WEIXIN
			this.getLiveListsFun();
			// #endif
			that = this
		},
		onUnload() {
			uni.$off("refreshhome");
			uni.$off("refreshPage");
		},
		onShow() {
			this.enable = this.active == 0 ? true : false;
			this.getCartNum();
			// this.initLocationFunc()  
			if (this.cityInfo.userAddress) {
				this.isshowmsg = true
			} else {
				// this.isshowmsg = false
				this.isshowmsg = true
			}
		},
		onHide() {
			// #ifdef H5
			this.enable = false;
			// #endif
		},
		onReady() {
			// #ifdef MP
			// 关闭胶囊提示
			this.offPromptFunc();
			// #endif
			// this.topH()
			// 一进页面获取位置
			this.RestartLocation()
		},
		methods: {
			// topH() {
			// 	uni.createSelectorQuery().select('.indexTop').boundingClientRect(data => {
			// 		this.topHeight = data.height;
			// 	}).exec()
			// },
			...mapActions(["getCartNum", "getUser", "wxShare", "initLocationFunc"]),
			...mapMutations(["setConfig"]),
			// 点击重新获取位置 
			RestartLocation: debounce(() => {
				that.initLocationFunc(true)
			}, 1000),
			// 网络重试刷新网络请求（解决在ios中首次进入时需要授权蜂窝加载空白页面问题
			async handleRetry() {
				// console.log("网络重试刷");
				const {
					code,
					data
				} = await getConfig();
				if (code == 1) {
					this.setConfig(data);
					if (data.is_open_nearby) {
						// 获取定位
						this.initLocationFunc();
					}
					// 防止第一次调用时拿不到数据
					this.wxShare();
				}
				this.getUser();
			},
			// #ifdef MP
			offPromptFunc() {
				let time = 8;
				this.offPrompt = setInterval(() => {
					time -= 1;
					if (time <= 0) this.clearIntervalFunc();
				}, 1000);
			},
			clearIntervalFunc() {
				clearInterval(this.offPrompt);
				this.offPrompt = false;
			},
			// #endif
			// 获取1级分类
			async getLevelOneListFun() {
				const {
					code,
					data
				} = await getLevelOneList();
				if (code == 1) {
					this.cateList = [homeItem, ...data];
					this.showCateList = [];
				}
			},
			// 获取菜单
			async getMenuFun() {
				const {
					code,
					data
				} = await getMenu({
					type: 1,
				});
				if (code == 1) {
					this.navList = data;
				}
			},
			// 获取首页数据
			async getHomeFun() {
				const {
					code,
					data
				} = await getHome({
					city_id: this.cityInfo.id
				});
				if (code == 1) {
					this.homeData = data;
				}
			},
			// #ifdef MP-WEIXIN
			async getLiveListsFun() {
				const {
					code,
					data
				} = await getLiveLists({
					page_size: 6,
					page_no: 1
				});
				if (code == 1) {
					this.liveLists = data.list;
				}
			},
			// #endif
			changeActive(index) {
				this.active = index;
				this.enable = index == 0;
				this.mescroll.optDown.use = index == 0;
				this.showCateList[index] = true;
			},
			async downCallback() {
				await this.getLevelOneListFun();
				await this.getMenuFun();
				await this.getHomeFun();
				// #ifdef MP-WEIXIN
				this.getLiveListsFun();
				// #endif
				this.$refs.mescrollItem.getData();
				this.mescroll.endSuccess(0, false);
			},
		},
		computed: {
			...mapGetters(["sysInfo", "inviteCode", "appConfig", "cityInfo", "ischosed"]),
			navH() {
				return this.sysInfo.navHeight + "px";
			},
			// 分类栏悬浮高度
			cateTop() {
				return this.sysInfo.navHeight + uni.upx2px(80) + "px";
			},
			headerStyle() {
				const {
					active,
					cateList,
					appConfig
				} = this;
				let bg = cateList[active].bg_image;
				if (active == 0) {
					bg = appConfig.index_setting.top_bg_image;
				}
				return bg ? {
					"background-image": `url(${bg})`,
				} : {};
			},
		},
	};
</script>

<style lang="scss">
	page {
		padding: 0;
	}

	.address-title {
		height: 98rpx;
		padding: 34rpx 22rpx 40rpx 22rpx;

		.map-icon {
			width: 24rpx;
			height: 24rpx;
			margin-right: 10rpx;
		}

		.map-text {
			font-weight: 400;
			font-size: 24rpx;
			color: #FFFFFF;
		}
	}

	.index-bg {
		// background-color: #6BAEAC;
		// background-image: url("../../static/images/index_bg.png");
		background-image: none;
		background-size: 100% auto;
		background-repeat: no-repeat;
		position: relative;

		background: url("") 0 0 no-repeat;
		background-size: 100%;
	}

	.indexTop {
		display: block;
		// background-color: #6BAEAC;

		position: sticky;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 99;
	}

	.add-button {
		text-align: center;
		line-height: 2;
		margin-top: 24rpx;
	}

	.index {
		min-height: calc(100vh - var(--window-bottom));

		.u-navbar {
			::v-deep .u-search {
				padding: 0 30rpx;
			}
		}

		// 胶囊提示
		.capsule-tips {
			width: 584rpx;
			color: #ffffff;
			padding: 12rpx 18rpx;
			border-radius: 14rpx;
			background: rgba(0, 0, 0, 0.7);
			position: relative;
			position: absolute;
			z-index: 9999;
			bottom: -80rpx;
			right: -150rpx;
		}

		.capsule-tips::after {
			content: "";
			border-bottom: 14rpx solid rgba(0, 0, 0, 0.7);
			border-right: 14rpx solid transparent;
			border-left: 14rpx solid transparent;
			position: absolute;
			top: -14rpx;
			right: 88rpx;
		}

		.cate-icon {
			width: 10rpx;
			height: 44rpx;
			background: linear-gradient(270deg, #D92A2E 0%, #C62024 100%);
			margin-left: 20rpx;
		}

		.cate-btn {
			padding: 12rpx 16rpx 12rpx 0rpx;

			.icon-xs {
				width: 26rpx;
				height: 26rpx;
				margin-right: 4rpx;
			}
		}
	}
</style>